<template>
  <div :class="IsShow ? 'hide info_box' : 'info_box'" >
    <h1 class="title">参试人员</h1>
    <div class="userInfoBox">
      <p>值班领导</p>
      <div class="peopleBox">
        <img v-if="listData.data.taskLeader" :src="'data:image/jpg;base64,'+listData.data.taskLeader" alt="">
        <img v-else src="/images/people_mask.jpg" alt="">
        <p> {{listData.data.taskLeaderName}}</p>
      </div>
    </div>
    <div class="userInfoBox">
      <p>任务负责人</p>
      <div class="peopleBox">
        <img v-if="listData.data.testManager" :src="'data:image/jpg;base64,'+listData.data.testManager" alt="">
        <img v-else src="/images/people_mask.jpg" alt="">
        <p>{{listData.data.testManagerName}}</p>
      </div>
    </div>
    <div class="userInfoBox">
      <p>试验负责人</p>
      <div class="peopleBox">
        <img v-if="listData.data.dutyLeader" :src="'data:image/jpg;base64,'+listData.data.dutyLeader" alt="">
        <img v-else src="/images/people_mask.jpg" alt="">
        <p>{{listData.data.dutyLeaderName}}</p>
      </div>
    </div>
    <el-row class="wrap peopleInfoBox">
      <el-col :span="12">
        <div class="job_type">
          白班
          <div class="line"></div>
        </div>
        <div class="jobs">
          <div class="job" style="margin-top: 0px;">
            <p>值班长</p>
            <div class="peopleBox">
              <img v-if="listData.data.dayTime.shiftForeman" :src="'data:image/jpg;base64,'+listData.data.dayTime.shiftForeman" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.dayTime.shiftForemanName}}</p>
            </div>
          </div>
          <div class="job">
            <p>值班分析</p>
            <div class="peopleBox">
              <img v-if="listData.data.dayTime.watchAnalysis" :src="'data:image/jpg;base64,'+listData.data.dayTime.watchAnalysis" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.dayTime.watchAnalysisName}}</p>
            </div>
          </div>
          <div class="job">
            <p>模型岗</p>
            <div class="peopleBox">
              <img v-if="listData.data.dayTime.modelPost" :src="'data:image/jpg;base64,'+listData.data.dayTime.modelPost" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.dayTime.modelPostName}}</p>
            </div>
            
          </div>
          <div class="job">
            <p>测试岗</p>
            <div class="peoples">
              <div class="peopleBox">
                <img v-if="listData.data.dayTime.measurementCtrlA" :src="'data:image/jpg;base64,'+listData.data.dayTime.measurementCtrlA" alt="">
                <img v-else src="/images/people_mask.jpg" alt="">
                <p>{{listData.data.dayTime.measurementCtrlAName}}</p>
              </div>
              <div class="peopleBox">
                <img v-if="listData.data.dayTime.measurementCtrlB" :src="'data:image/jpg;base64,'+listData.data.dayTime.measurementCtrlB" alt="">
                <img v-else src="/images/people_mask.jpg" alt="">
                <p>{{listData.data.dayTime.measurementCtrlBName}}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="job_type">
          夜班
        </div>
        <div class="jobs">
          <div  class="job" style="margin-top: 0px;">
            <p>值班长</p>
            <div class="peopleBox">
              <img v-if="listData.data.nightTime.shiftForeman" :src="'data:image/jpg;base64,'+listData.data.nightTime.shiftForeman" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.nightTime.shiftForemanName}}</p>
            </div>
          </div>
          <div class="job">
            <p>值班分析</p>
            <div class="peopleBox">
              <img v-if="listData.data.nightTime.watchAnalysis" :src="'data:image/jpg;base64,'+listData.data.nightTime.watchAnalysis" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.nightTime.watchAnalysisName}}</p>
            </div>
          </div>
          <div class="job">
            <p>模型岗</p>
            <div class="peopleBox">
              <img v-if="listData.data.nightTime.modelPost" :src="'data:image/jpg;base64,'+listData.data.nightTime.modelPost" alt="">
              <img v-else src="/images/people_mask.jpg" alt="">
              <p>{{listData.data.nightTime.modelPostName}}</p>
            </div>
          </div>
          <div class="job">
            <p>测试岗</p>
            <div class="peoples">
              <div class="peopleBox">
                <img v-if="listData.data.nightTime.measurementCtrlA" :src="'data:image/jpg;base64,'+listData.data.nightTime.measurementCtrlA" alt="">
                <img v-else src="/images/people_mask.jpg" alt="">
                <p>{{listData.data.nightTime.measurementCtrlAName}}</p>
              </div>
              <div class="peopleBox">
                <img v-if="listData.data.nightTime.measurementCtrlB" :src="'data:image/jpg;base64,'+listData.data.nightTime.measurementCtrlB" alt="">
                <img v-else src="/images/people_mask.jpg" alt="">
                <p>{{listData.data.nightTime.measurementCtrlBName}}</p>
              </div>
            </div>
          </div>  
        </div>
      </el-col>
    </el-row>
    <img src="/images/row.png" :class="IsShow ? 'rowReverse row' : 'row'" alt="" @click="IsShow = !IsShow">
  </div>
</template>
<script setup>
import { ref , onMounted , reactive } from 'vue'
import { getdutyroster } from '@/axios/index'


let IsShow = ref(false);

let listData = reactive({
  data:{
    dayTime:{},
    nightTime:{}
  }
});

onMounted(()=>{
  getdutyroster({},(res)=>{
    listData.data = res.data;

  })

})

</script>

<style scoped lang="less">
  .hide{
    transform: translateX(340px);
    -webkit-transform: translateX(340px);
  }
  .info_box{
      width:100%;
      height:100%;
      background-color: #0e1823bd;
      backdrop-filter: blur(110px);
      color: white;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      .row{
          width: 50px;
          height: auto;
          position: absolute;
          top: 50%;
          left: -2%;
          transform: translate(-50px,-50%);
          -webkit-transform: translate(-50px,-50%);
      }
      .rowReverse{
        transform:  translate(-50px,-50%) scaleX(-1) ;
        -webkit-transform:  translate(-50px,-50%) scaleX(-1) ;
      }

      .title{
        text-align: center;
        margin: 10px 0px 0px;
        font-size: 2.8rem;
        color: #ffffff;
      }
      .userInfoBox{
        height: 200px;
        line-height: 200px;
        display: flex;
        align-items: center;
        text-align: center;
        padding-left: 25%;
        p{
          font-size: 2rem;
        }
        .peopleBox{
          position: relative;
          display: inline-block;
          width: auto;
          height: 180px;
          margin: 0px 20% 0px 10%;
          p{
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 30px;
            line-height: 30px;
            background-color: #03111bc9;
            color: #ffffff;
            font-weight: bold;
            font-size: 2.7rem;
          }
          img{
            height: 100%;
            width: auto;
          }
        }


        span{
          display: inline-block;
          text-align: center;
          height: 100px;
          line-height: 100px;
        }
        
      }
      .peopleInfoBox{
        text-align: center;
        .job_type{
          height: 80px;
          line-height: 80px;
          background-color: #03111bc9;
          color: #045999;
          font-weight: bold;
          position: relative;
          font-size: 2.2rem;
          .line{
            position: absolute;
            right: 0%;
            top: 20%;
            height: 80%;
            width: 1px;
            background-color: #2ee6e2;
          }
        }
        .jobs{
          position: relative;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          font-size: 1.8rem;
          .job{
            width: 100%;
            height: 200px;
            line-height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-top: 10%;
            .peopleBox{
              position: relative;
              display: inline-block;
              width: auto;
              height: 180px;
              p{
                position: absolute;
                bottom: 3px;
                left: 0px;
                width: 100%;
                height: 30px;
                line-height: 30px;
                background-color: #03111bc9;
                color: #ffffff;
                font-weight: bold;
                font-size: 1.7rem;
              }
            }
            p{
              height: 35px;
              line-height: 35px;
              margin-bottom: 12px;
              margin-top: 2%;
            }
            img{
              width: auto;
              height: 180px;
              padding-bottom: 15px;
            }
            .peoples{
              display: flex;
              flex-direction: rows;
              p{
                width: 94%;
               margin-left: 3%;
              }
              img{
                margin: 0px 5px;
              }
            }
          }
        }
      }
  }

</style>